<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="https://unpkg.com/vue@next"></script>

</head>
<body>

<div id="app">
    <h3>注册</h3>
    用户名:<input type="text" v-model="userName"><br/>
    密码:<input type="password" v-model="password"><br/>
    性别:<br/>
    男:<input type="radio" name="sex" value="1" v-model="sex"><br/>
    女:<input type="radio" name="sex" value="0" v-model="sex"><br/>
    电话:<input type="text" v-model="phone">
    家庭地址:<br/>
    <select v-model="addres">
        <option value="bj">北京</option>
        <option value="fz">福州</option>
    </select><br/>
    自我介绍:<br/>
    <textarea v-model="desc" cols="20" rows="10">

    </textarea><br/>

    <button v-on:click="register">点击注册</button><br/>
    <div style="width: 300px;height: 150px;background-color: darkorange" v-html="content">

    </div>
     将选中的值放到一个DIV中、打印控制台
</div>

</body>

<script>
    Vue.createApp({
        data() {
            return {
                userName:'',
                password:'',
                sex:1,
                phone:'',
                addres:'bj',
                desc:'',
                content:''
            }
        },
        methods:{
            register(){
                this.content = '用户名:'+this.userName
                this.content += '<br/> 密码:' + this.password
                this.content += '<br/> 性别:' + this.sex==1?'男':'女'
                this.content += '<br/> 电话:' + this.phone
                this.content += '<br/> 地址:' + this.addres
                this.content += '<br/> 自我介绍:' + this.desc

            }
        }
    }).mount("#app")
</script>

</html>